<template>
	<div class="one-tab">
		<div class="search-row">
			<div class="block">
				<!-- HH:mm:ss  datetimerange -->
				<el-date-picker v-model="dateQuantum" value-format="yyyy-MM-dd" type="daterange" :picker-options="pickerOptions"
				 range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" align="right" unlink-panels>
				</el-date-picker>
			</div>
			<div class="search-btn-div">
				<el-button type="primary" @click="searchClick"><i class="el-icon-search"></i> 查询</el-button>
			</div>
		</div>
		<div class="one-sta">
			<div id="chart1" style="width: 1200px; height: 400px"></div>
		</div>
	</div>
</template>

<script>
	import statisticsTab from '../StatisticsTab.js';
	import SaleTimeService from './SaleTimeService.js';
	export default {
		name: 'SaleTime',
		data() {
			return {
				pickerOptions: statisticsTab.pickerOptions,
				dateQuantum: [],
				xData: [],
				yData: [],
			}
		},
		created() {
			//初始显示一个月
			this.dateQuantum = statisticsTab.getDate();
			this.getDateAndSaleNum();
		},
		mounted() {
			this.createChart();
		},
		methods: {
			searchClick() {
				this.getDateAndSaleNum();
			},
			getDateAndSaleNum(){
				if(this.dateQuantum.length){
					SaleTimeService.getdateandsalenumService({
						start_date: this.dateQuantum[0],
						end_date: this.dateQuantum[1]
					},res=>{
						console.log(res);
						this.xData = res.dateArr;
						this.yData = res.dataArr;
						this.createChart();
					});
				}else{
					this.$message('请选择日期范围');
				}
			},
			createChart() {
				var echarts = require('echarts');

				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('chart1'));
				// 绘制图表
				myChart.setOption({
					color: ['#003366'],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {
						data: ['美食']
					},
					toolbox: {
						show: true,
						orient: 'vertical',
						left: 'right',
						top: 'center',
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: false
							},
							magicType: {
								show: true,
								type: ['line', 'bar', 'stack', 'tiled']
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					xAxis: [{
						type: 'category',
						axisTick: {
							show: false
						},
						data: this.xData,
					}],
					yAxis: [{
						type: 'value'
					}],
					dataZoom: [{
							show: true,
							start: 0,
							end: 100,
							handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
							handleSize: '80%',
							handleStyle: {
								color: '#fff',
								shadowBlur: 3,
								shadowColor: 'rgba(0, 0, 0, 0.6)',
								shadowOffsetX: 2,
								shadowOffsetY: 2
							}
						},
						{
							type: 'inside',

							start: 0,
							end: 100
						},
					],
					series: [{
							name: '美食',
							type: 'bar',
							barGap: 0,
							data: this.yData
						}
					]
				});
			}
		},
	}
</script>

<style scoped lang="less">
	@import "../StatisticsTab.less";
</style>
